<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@include file="../../include/taglib.jsp"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<%@include file="../../include/inhead.jsp"%>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<title>车辆保养--E爱车</title>
<%@include file="../../include/iswechat.jsp"%>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
			<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
<style>
body {
	color: #444;;
	background-color: #eee;
}

a {
	text-decoration: none
}

li {
	list-style: none;
}

.navbar-eaiche {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
}

.tile {
	border: 1px solid #ccc;
	background-color: #fff;
	height: 150px;
	line-height: 150px;
	margin-top: 20px;
	text-align: center;
	padding: 0px;
	border-radius: 5px;
}

.tile img {
	width: 40%;
}
/**************************服务选择样式********************************/
.group-box {
	border: 1px solid #ccc;
	border-radius: 5px 5px 0 0;
	background-color: #fff;
	margin: 10px;
}

.group-box .caption {
	height: 35px;
	line-height: 40px;
	padding-left: 10px;
	border-bottom: 1px solid #ccc;
}

.car-model-list {
	margin: 0px;
	padding: 0px;
	padding-left: 20px;
}

.car-model-list li {
	height: 40px;
	line-height: 40px;
}

.service-item {
	margin: 0px;
	padding: 0px;
	padding-left: 20px;
}

.service-item li {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px solid #ccc;
	background-image: url(${ctx}/static/images/jiantou01.png);
	background-repeat: no-repeat;
	background-position: right;
}

.service-item .price {
	margin-left: 80px;
	color: red;
}

.other-selection {
	border-bottom: 1px solid #ccc;
	display: none;
	padding: 10px;
}

.show-me-the-money {
	height: 50px;
	line-height: 50px;
	color: red;
	font-weight: 16px;
	padding-left: 10px;
}
/**************************服务选择样式********************************/
</style>
</head>
<body>
	<!-- 导航开始 -->
	<nav class="navbar navbar-eaiche">
		<div class="container">
			<div style="float: left;">
				<img style="height: 55px;" src="${ctx}/static/images/logoe.png" />
			</div>
			<div style="float: right; text-align: center; line-height: 50px;">
				<img style="height: 30px; margin-top: 0px;"
					src="${ctx}/static/images/local.png" />&nbsp;&nbsp;<span>${city }</span>
			</div>
		</div>
	</nav>
	<!-- 导航结束 -->
	<!-- 功能块开始 -->
	<div class="container-fluid">
		<div class="row">
			<div class="group-box">
				<div class="caption">
					<span>我的车型</span> <span>
						<button class="btn btn-warning btn-sm pull-right"
							style="margin-top: 2px; margin-right: 2px;"
							onclick="window.location.href='${ctx}/weixin/f/matenance/by/brand/carlist';">
							<span class="glyphicon glyphicon-edit" aria-hidden="true">&nbsp;重选车型</span>
						</button>
				</div>
				<div>
					<ul class="car-model-list">
						<li>${che }</li>
					</ul>
				</div>

			</div>
			<div class="group-box">
				<div class="caption">服务类型</div>
				<div>
					<ul class="car-model-list">
						<li>${lei }</li>
					</ul>
				</div>
			</div>
			
			<div class="group-box">
				<div class="caption">服务项目车型</div>
				<div>
					<ul class="service-item" >
                           ${html }
					</ul>
				</div>
			</div>
		</div>
	<nav class="navbar navbar-default navbar-fixed-bottom">
				<div class="container">
					<div class="row">
						<div class="col-xs-9 show-me-the-money" id="money">
						 
						</div>
						<div class="col-xs-3" style="line-height:50px;">
							<button class="btn btn-default btn-warning" id="zhuan">下一步</button>
						</div>
					</div>
				</div>
			</nav>
	</div>
	<input type="hidden" id="leiid" value="${id }" />
	<!-- 功能块结束 -->
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script
		src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

	<script>
		var shu = $("#zilei").val();
		var money=0;
		var div=$('.service-item > li > input[class="xp"]');
		$(function(){
			
		      for(var i =0; i<div.length;i++){
		    	  money=parseInt(money)+parseInt($(div[i]).val());
		      }
		     $("#money").html("	当前费用:"+money+"元  (支持现金、刷卡支付)");
		     
			$('.service-item > li').on('click', function(){
				var self = $(this);
				var next = self.next();
				var buton = next.find('button');
				if(self.attr('is_open')=='true'){
					$(this).attr('is_open', 'false').css('background-image', 'url(${ctx}/static/images/jiantou01.png)');
					next.hide();
				}else{
					$(this).attr('is_open', 'true').css('background-image', 'url(${ctx}/static/images/jiantou02.png)');
					next.show();
					
				    $(buton).click(function(){
				    	  money=0;
				    	  
				          var o=$(this).val();
				          var index =o.indexOf(",");
				          var inex = o.lastIndexOf(",");
				       
				          var price = zi(o);
				       
				          self.html(o.substring(0,index)+"<span class=\"price\">"+price+"元</span><input type=\"hidden\" value=\""+price+"\" class=\"xp\"/>"
				        		                          +"<input type=\"hidden\" class=\"id\" value=\""+o.substring(inex+1,o.length)+"\"/>");
				           
				      	 var divs=$('.service-item > li > input[class="xp"]');
				      
				          for(var i = 0;i<divs.length;i++){
				        	 
				        	  money=parseInt(money)+parseInt($(divs[i]).val());
				        	  
				          }
					     $("#money").html("	当前费用:"+money+"元  (支持现金、刷卡支付)");
				         // alert(o.substring(0,index));
				         
				    });
				}
				
			});
			
			$('#zhuan').on('click',function(){
				 money =0;
				 var ids = "";
				 var divw=$('.service-item > li > input[class="xp"]');
				 var did=$('.service-item > li > input[class="id"]');
				 for(var i = 0;i<divw.length;i++){
		        	 
		        	  money=parseInt(money)+parseInt($(divw[i]).val());
		        	  ids+= $(did[i]).val()+",";
		          }
				 $.post("${ctx}/weixin/f/matenance/by/service/setids",
						 {
					         ids:ids
						 },function(data){
							 if(data.success){
								 window.location.href="${ctx}/weixin/f/matenance/by/store"; 
							 }
						 },"json");
			});
		});
		
		function zi(money){
			var result="";
			var arr = new Array();
			arr = money.split(",");
			if(arr.length > 1){
				 result = arr[1].substring(0, arr[1].length);
			}
		    return result;
		}
	  
	</script>
</body>
</html>
